﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>导航 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#navs" class="nav-link font-weight-bold"><span导航(Navs)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#overview" class="nav-link"><span>概述</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#link-appearance" class="nav-link"><span>链接外观</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#tab-style" class="nav-link"><span>Tab 样式</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#pill-style" class="nav-link"><span>Pill 样式</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#small" class="nav-link"><span>Small</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#fill-and-justify" class="nav-link"><span>填充并对齐</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#fill" class="nav-link"><span>填充</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#justified" class="nav-link"><span>两端对齐</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#alignment" class="nav-link"><span>对齐</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#vertical-variation" class="nav-link"><span>垂直变化</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#dropdown-support" class="nav-link"><span>下拉菜单支持</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#optionally-scoped-default-slot" class="nav-link"><span>可选范围的默认插槽</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#lazy-dropdown" class="nav-link"><span>Lazy 下拉菜单</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#nav-text-content" class="nav-link"><span>导航文本内容</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#nav-inline-forms" class="nav-link"><span>导航内联表单</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#tabbed-local-content-support" class="nav-link"><span>选项卡式本地内容支持</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#card-integration" class="nav-link"><span>Card 整合</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-with-vue-router" class="nav-link"><span>与Vue路由器一起使用</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>可访问性</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#tabbed-interface-accessibility" class="nav-link"><span>选项卡式界面可访问性</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#see-also" class="nav-link"><span>另请参阅</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-nav" class="nav-link"><span>&lt;b-nav&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-nav-item" class="nav-link"><span>&lt;b-nav-item&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-nav-text" class="nav-link"><span>&lt;b-nav-text&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-nav-form" class="nav-link"><span>&lt;b-nav-form&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-nav-item-dropdown" class="nav-link"><span>&lt;b-nav-item-dropdown&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">导航</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">导航(Navs)</h1>
<p class="bd-lead">
  引导程序中提供的导航共享常规标记和样式，从基类<code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>到<code translate="no" class="notranslate text-nowrap">active</code>和
  <code translate="no" class="notranslate text-nowrap">disabled</code>状态。交换修改器道具以在每个样式之间切换。
</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>





<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#overview" class=""><span data-v-811345e6="">Overview</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#link-appearance" class=""><span data-v-811345e6="">Link appearance</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#tab-style" class=""><span data-v-811345e6="">Tab style</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#pill-style" class=""><span data-v-811345e6="">Pill style</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#small" class=""><span data-v-811345e6="">Small</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#fill-and-justify" class=""><span data-v-811345e6="">Fill and justify</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#fill" class=""><span data-v-811345e6="">Fill</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#justified" class=""><span data-v-811345e6="">Justified</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#alignment" class=""><span data-v-811345e6="">Alignment</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#vertical-variation" class=""><span data-v-811345e6="">Vertical variation</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#dropdown-support" class=""><span data-v-811345e6="">Dropdown support</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#optionally-scoped-default-slot" class=""><span data-v-811345e6="">Optionally scoped default slot</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#lazy-dropdown" class=""><span data-v-811345e6="">Lazy dropdown</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#nav-text-content" class=""><span data-v-811345e6="">Nav text content</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#nav-inline-forms" class=""><span data-v-811345e6="">Nav inline forms</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#tabbed-local-content-support" class=""><span data-v-811345e6="">Tabbed local content support</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#card-integration" class=""><span data-v-811345e6="">Card integration</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-with-vue-router" class=""><span data-v-811345e6="">Using with Vue Router</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#tabbed-interface-accessibility" class=""><span data-v-811345e6="">Tabbed interface accessibility</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#see-also" class=""><span data-v-811345e6="">See also</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">组件引用</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-nav" class=""><span data-v-811345e6="">&lt;b-nav&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-nav-item" class=""><span data-v-811345e6="">&lt;b-nav-item&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-nav-text" class=""><span data-v-811345e6="">&lt;b-nav-text&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-nav-form" class=""><span data-v-811345e6="">&lt;b-nav-form&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-nav-item-dropdown" class=""><span data-v-811345e6="">&lt;b-nav-item-dropdown&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">导入单个组件</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</nav>
<div translate="translate" class="bd-example vue-example vue-example-b-nav notranslate">
<div>
<ul class="nav">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Another Link</a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Another Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="overview" class="bv-no-focus-ring"><span class="bd-content-title">概述<a class="anchorjs-link" href="#overview" aria-labelledby="overview"></a></span></h2>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>组件是用FrasBox构建的，为构建所有类型的导航组件提供了坚实的基础。它包括一些样式替代（用于处理列表），一些较大的命中区域的链接填充，以及基本的禁用样式。基本导航中不包括任何活动状态。
</p>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code> 支持以下子组件：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">&lt;b-nav-item&gt;</code> 用于可操作的链接（或路由器链接）</li>
<li><code translate="no" class="notranslate text-nowrap">&lt;b-nav-item-dropdown&gt;</code> 下拉菜单</li>
<li><code translate="no" class="notranslate text-nowrap">&lt;b-nav-text&gt;</code> 用于纯文本内容</li>
<li><code translate="no" class="notranslate text-nowrap">&lt;b-nav-form&gt;</code>用于内联表单</li>
</ul>
<h2 id="link-appearance" class="bv-no-focus-ring"><span class="bd-content-title">链接外观<a class="anchorjs-link" href="#link-appearance" aria-labelledby="link-appearance"></a></span></h2>
<p>
  支持两种样式变体：<code translate="no" class="notranslate text-nowrap">tabs</code>和 
</p>
<h3 id="tab-style" class="bv-no-focus-ring"><span class="bd-content-title">Tab 样式<a class="anchorjs-link" href="#tab-style" aria-labelledby="tab-style"></a></span></h3>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">tabs</code>属性使导航看起来像栏标。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-tabs notranslate">
<div>
<ul class="nav nav-tabs">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Another Link</a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">tabs</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Another Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="pill-style" class="bv-no-focus-ring"><span class="bd-content-title">Pill 样式<a class="anchorjs-link" href="#pill-style" aria-labelledby="pill-style"></a></span></h3>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">pills</code>属性使用pill样式。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-pills notranslate">
<div>
<ul class="nav nav-pills">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Another Link</a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">pills</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Another Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="small" class="bv-no-focus-ring"><span class="bd-content-title">Small<a class="anchorjs-link" href="#small" aria-labelledby="small"></a></span></h3>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">small</code>属性使导航更小。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-small notranslate">
<div>
<ul class="nav small">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Another Link</a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">small</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Another Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="fill-and-justify" class="bv-no-focus-ring"><span class="bd-content-title">填充并对齐<a class="anchorjs-link" href="#fill-and-justify" aria-labelledby="fill-and-justify"></a></span></h2>
<p>
  强制您的<code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>内容扩展整个可用宽度。
</p>
<h3 id="fill" class="bv-no-focus-ring"><span class="bd-content-title">填充<a class="anchorjs-link" href="#fill" aria-labelledby="fill"></a></span></h3>
<p>
  要使用<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item&gt;</code>组件按比例填充所有可用空间，
  请设置<code translate="no" class="notranslate text-nowrap">fill</code>属性。请注意，所有水平空间都已占用，但并非每个导航项都具有相同的宽度。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-fill notranslate">
<div>
<ul class="nav nav-tabs nav-fill">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link with a long name </a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">tabs</span> <span class="hljs-attr">fill</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link with a long name <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="justified" class="bv-no-focus-ring"><span class="bd-content-title">两端对齐<a class="anchorjs-link" href="#justified" aria-labelledby="justified"></a></span></h3>
<p>
  对于等宽元素，请改为设置<code translate="no" class="notranslate text-nowrap">justified</code>。所有水平空间将被导航链接占用，
  但与上面的<code translate="no" class="notranslate text-nowrap">fill</code>不同，每个<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item&gt;</code>的宽度将相同。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-justified notranslate">
<div>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link with a long name </a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">tabs</span> <span class="hljs-attr">justified</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link with a long name <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="alignment" class="bv-no-focus-ring"><span class="bd-content-title">对齐<a class="anchorjs-link" href="#alignment" aria-labelledby="alignment"></a></span></h2>
<p>
  要对齐<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item&gt;</code>组件，
  请使用<code translate="no" class="notranslate text-nowrap">align</code>属性。
  可用值包括 <code translate="no" class="notranslate text-nowrap">left</code>, 
  <code translate="no" class="notranslate text-nowrap">center</code>和
  <code translate="no" class="notranslate text-nowrap">right</code>.。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-alignment notranslate">
<div>
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link with a long name </a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">tabs</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link with a long name <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="vertical-variation" class="bv-no-focus-ring"><span class="bd-content-title">垂直变化<a class="anchorjs-link" href="#vertical-variation" aria-labelledby="vertical-variation"></a></span></h2>
<p>
  默认情况下<code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>显示在水平线上。通过设置<code translate="no" class="notranslate text-nowrap">vertical</code>属性堆叠导航。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-vertical notranslate">
<div>
<ul class="nav w-25 flex-column">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Another Link</a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">vertical</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w-25"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Another Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="dropdown-support" class="bv-no-focus-ring"><span class="bd-content-title">下拉菜单支持<a class="anchorjs-link" href="#dropdown-support" aria-labelledby="dropdown-support"></a></span></h2>
<p>
  使用<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item-dropdown&gt;</code>将下拉项放置在导航中。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-dropdown notranslate">
<div>
<ul class="nav nav-pills">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Link</a></li>
<li id="my-nav-dropdown" class="nav-item b-nav-dropdown dropdown"><a id="my-nav-dropdown__BV_button_" aria-haspopup="true" aria-expanded="false" target="_self" href="#" class="nav-link dropdown-toggle nav-link-custom"><span>Dropdown</span></a>
<ul tabindex="-1" aria-labelledby="my-nav-dropdown__BV_button_" class="dropdown-menu dropdown-menu-right">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">One</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Two</a></li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Three</a></li>
</ul>
</li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">pills</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item-dropdown</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"my-nav-dropdown"</span>
      <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown"</span>
      <span class="hljs-attr">toggle-class</span>=<span class="hljs-string">"nav-link-custom"</span>
      <span class="hljs-attr">right</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span>&gt;</span>One<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span>&gt;</span>Two<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span>&gt;</span>Three<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item-dropdown</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  有时，您希望将自己的类名添加到生成的下拉切换按钮中，该按钮在默认情况下具有类<code translate="no" class="notranslate text-nowrap">nav-link</code>和
  <code translate="no" class="notranslate text-nowrap">dropdown-toggle</code>。使用<code translate="no" class="notranslate text-nowrap">toggle</code>类属性添加它们（如上所述），将生成如下内容：
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-nav-dropdown"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item b-nav-dropdown dropdown"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">a</span>
    <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>
    <span class="hljs-attr">id</span>=<span class="hljs-string">"my-nav-dropdown__BV_button_"</span>
    <span class="hljs-attr">aria-haspopup</span>=<span class="hljs-string">"true"</span>
    <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>
    <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-link dropdown-toggle nav-link-custom"</span>
  &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
  ...
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></pre></figure>
<p>
  有关支持的子组件的列表，请参阅<a href="../../../bootstrap-vue/docs/components/dropdown" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code></a>。
</p>
<h3 id="optionally-scoped-default-slot" class="bv-no-focus-ring"><span class="bd-content-title">可选范围的默认插槽<a class="anchorjs-link" href="#optionally-scoped-default-slot" aria-labelledby="optionally-scoped-default-slot"></a></span></h3>
<p>下拉式默认插槽的作用域可以选择为以下可用的作用域：</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性或方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">hide()</code></td>
<td>
  可用于关闭下拉菜单。接受可选的布尔参数，如果为<code translate="no" class="notranslate text-nowrap">true</code>，则返回切换按钮的焦点
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="lazy-dropdown" class="bv-no-focus-ring"><span class="bd-content-title">Lazy 下拉菜单<a class="anchorjs-link" href="#lazy-dropdown" aria-labelledby="lazy-dropdown"></a></span></h3>
<p>
  默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item-dropdown&gt;</code>在DOM中呈现菜单内容，即使没有显示菜单。
  当在同一页上呈现大量下拉列表时，由于整体内存利用率较高，性能可能会受到影响。您可以指示<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item-dropdown&gt;</code>
  仅当通过将<code translate="no" class="notranslate text-nowrap">lazy</code>属性设置为true显示菜单内容时才呈现菜单内容。
</p>
<h2 id="nav-text-content" class="bv-no-focus-ring"><span class="bd-content-title">导航文本内容<a class="anchorjs-link" href="#nav-text-content" aria-labelledby="nav-text-content"></a></span></h2>
<p>
  使用<code translate="no" class="notranslate text-nowrap">&lt;b-nav-text&gt;</code>子组件将纯文本内容放入导航：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-text notranslate">
<div>
<ul class="nav">
<li class="nav-item"><a target="_self" href="#1" class="nav-link">Link 1</a></li>
<li class="nav-item"><a target="_self" href="#2" class="nav-link">Link 2</a></li>
<li class="navbar-text">Plain text</li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#1"</span>&gt;</span>Link 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#2"</span>&gt;</span>Link 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-text</span>&gt;</span>Plain text<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-text</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="nav-inline-forms" class="bv-no-focus-ring"><span class="bd-content-title">导航内联表单<a class="anchorjs-link" href="#nav-inline-forms" aria-labelledby="nav-inline-forms"></a></span></h2>
<p>
  使用<code translate="no" class="notranslate text-nowrap">&lt;b-nav-form&gt;</code>子组件将内联表单放入导航：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-nav-form notranslate">
<div>
<ul class="nav nav-pills">
<li class="nav-item"><a target="_self" href="#1" class="nav-link active">Link 1</a></li>
<li class="nav-item"><a target="_self" href="#2" class="nav-link">Link 2</a></li>
<li class="form-inline">
<form class="form-inline">
<input type="text" class="mr-1 form-control" aria-label="Input" id="__BVID__577">
<button type="submit" class="btn btn-secondary">Ok</button>
</form>
</li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">pills</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#1"</span> <span class="hljs-attr">active</span>&gt;</span>Link 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#2"</span>&gt;</span>Link 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-form</span> @<span class="hljs-attr">submit.stop.prevent</span>=<span class="hljs-string">"alert('Form Submitted')"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Input"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>&gt;</span>Ok<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-form</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  有关放置表单控件的其他详细信息，请参阅<a href="../../../bootstrap-vue/docs/components/form#inline-form" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form&gt;</code> inline</a>内联文档。
</p>
<h2 id="tabbed-local-content-support" class="bv-no-focus-ring"><span class="bd-content-title">选项卡式本地内容支持<a class="anchorjs-link" href="#tabbed-local-content-support" aria-labelledby="tabbed-local-content-support"></a></span></h2>
<p>
  请参阅<a href="../../../bootstrap-vue/docs/components/tabs" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code></a>组件以创建本地内容的选项卡式窗格（不适合导航）。
</p>
<h2 id="card-integration" class="bv-no-focus-ring"><span class="bd-content-title">Card 整合<a class="anchorjs-link" href="#card-integration" aria-labelledby="card-integration"></a></span></h2>
<p>
  使用<a href="../../../bootstrap-vue/docs/components/card" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code></a>标题中的
  <code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>，
  启用<code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>标题属性并设置<code translate="no" class="notranslate text-nowrap">pills</code>或
  <code translate="no" class="notranslate text-nowrap">tabs</code>：
</p>
<p><strong>Tabs 样式:</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-nav-card-tabs notranslate">
<div>
<div class="card">
<nav class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Inactive</a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</nav>
<div class="card-body text-center">
<p class="card-text"> With supporting text below as a natural lead-in to additional content. </p>
<button type="button" class="btn btn-primary">Go somewhere</button>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Card Title"</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-header</span> <span class="hljs-attr">header-tag</span>=<span class="hljs-string">"nav"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">card-header</span> <span class="hljs-attr">tabs</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Inactive<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-header</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        With supporting text below as a natural lead-in to additional content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Go somewhere<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>Pill 样式:</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-nav-card-pills notranslate">
<div>
<div class="card">
<nav class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Inactive</a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</nav>
<div class="card-body text-center">
<p class="card-text"> With supporting text below as a natural lead-in to additional content. </p>
<button type="button" class="btn btn-primary">Go somewhere</button>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Card Title"</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-header</span> <span class="hljs-attr">header-tag</span>=<span class="hljs-string">"nav"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">card-header</span> <span class="hljs-attr">pills</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Inactive<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-header</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        With supporting text below as a natural lead-in to additional content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Go somewhere<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>Plain 样式:</strong></p>
<p>
  只有当你使用<code translate="no" class="notranslate text-nowrap">tabs</code>或 
  <code translate="no" class="notranslate text-nowrap">pills</code> 样式时，才需要<code translate="no" class="notranslate text-nowrap">card-header</code>属性。
  请注意，Bootstrap v4 SCSS没有针对<code translate="no" class="notranslate text-nowrap">active</code>状态纯样式导航项的特殊样式。
</p>
<div translate="translate" class="bd-example vue-example vue-example-nav-card-plain notranslate">
<div>
<div class="card">
<nav class="card-header">
<ul class="nav">
<li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
<li class="nav-item"><a target="_self" href="#" class="nav-link">Inactive</a></li>
<li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#" class="nav-link disabled">Disabled</a></li>
</ul>
</nav>
<div class="card-body text-center">
<p class="card-text"> With supporting text below as a natural lead-in to additional content. </p>
<button type="button" class="btn btn-primary">Go somewhere</button>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Card Title"</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-header</span> <span class="hljs-attr">header-tag</span>=<span class="hljs-string">"nav"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Inactive<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-header</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        With supporting text below as a natural lead-in to additional content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Go somewhere<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  如果 <code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>处于<code translate="no" class="notranslate text-nowrap">vertical</code>模式，则<code translate="no" class="notranslate text-nowrap">card-header</code>属性没有样式效果。
</p>
<h3 id="using-with-vue-router" class="bv-no-focus-ring"><span class="bd-content-title">与Vue路由器一起使用<a class="anchorjs-link" href="#using-with-vue-router" aria-labelledby="using-with-vue-router"></a></span></h3>
<p>
  让您的card通过<code translate="no" class="notranslate text-nowrap">&lt;router-view&gt;</code>或
   <code translate="no" class="notranslate text-nowrap">&lt;nuxt-child&gt;</code>组件控制vue路由器嵌套路由，以创建随路由URL更改的选项卡式内容：
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no">// On page with route `/some/route`
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Card Title"</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-header</span> <span class="hljs-attr">header-tag</span>=<span class="hljs-string">"nav"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">card-header</span> <span class="hljs-attr">tabs</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- &lt;b-nav-item&gt;'s with child routes. Note the trailing slash on the first &lt;b-nav-item&gt; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/some/route/"</span> <span class="hljs-attr">exact</span> <span class="hljs-attr">exact-active-class</span>=<span class="hljs-string">"active"</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/some/route/foo"</span> <span class="hljs-attr">exact</span> <span class="hljs-attr">exact-active-class</span>=<span class="hljs-string">"active"</span>&gt;</span>Foo<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/some/route/bar"</span> <span class="hljs-attr">exact</span> <span class="hljs-attr">exact-active-class</span>=<span class="hljs-string">"active"</span>&gt;</span>Bar<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-header</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- Child route gets rendered in &lt;router-view&gt; or &lt;nuxt-child&gt; --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- Or if using Nuxt.js
      &lt;nuxt-child&gt;&lt;/nuxt-child&gt;
      --&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>注意:
  Vue路由器不支持使用哈希（<code translate="no" class="notranslate text-nowrap">#</code>）定义活动路由，因此必须将“tab”内容定义为子路由。
</p>
<p><strong>上面的路由器配置示例：</strong></p>
<!-- eslint-disable no-unused-vars, no-undef -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">const</span> routes = [
  {
    <span class="hljs-attr">path</span>: <span class="hljs-string">'/some/route'</span>,
    <span class="hljs-comment">// We don't provide a name on this parent route, but rather</span>
    <span class="hljs-comment">// set the name on the default child route instead</span>
    <span class="hljs-comment">// name: 'some-route',</span>
    <span class="hljs-attr">component</span>: SomeRouteComponent,
    <span class="hljs-comment">// Child route "tabs"</span>
    <span class="hljs-attr">children</span>: [
      <span class="hljs-comment">// Note we provide the above parent route name on the default child tab</span>
      <span class="hljs-comment">// route to ensure this tab is rendered by default when using named routes</span>
      { <span class="hljs-attr">path</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">component</span>: DefaultTabComponent, <span class="hljs-attr">name</span>: <span class="hljs-string">'some-route'</span> },
      { <span class="hljs-attr">path</span>: <span class="hljs-string">'foo'</span>, <span class="hljs-attr">component</span>: FooTabComponent },
      { <span class="hljs-attr">path</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">component</span>: BarTabComponent }
    ]
  }
]</pre></figure>
<p>
  也可以使用<a href="https://router.vuejs.org/guide/essentials/named-routes.html#named-routes" target="_blank" rel="noopener">named routes</a>和/或route params的Vue路由器，而不是基于路径的路由。
</p>
<p>有关详细信息，请参见：</p>
<ul>
<li><a href="https://router.vuejs.org/api/#router-view" target="_blank" rel="noopener">Vue Router <code translate="no" class="notranslate text-nowrap">&lt;router-view&gt;</code></a></li>
<li><a href="https://nuxtjs.org/api/components-nuxt-child" target="_blank" rel="noopener">Nuxt.JS <code translate="no" class="notranslate text-nowrap">&lt;nuxt-child&gt;</code></a></li>
</ul>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">可访问性<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>
  如果使用<code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>提供导航栏，
  请确保将<code translate="no" class="notranslate text-nowrap">role="navigation"</code>
  添加到<code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>的最合乎逻辑的父容器中，
  或在<code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>周围包装一个<code translate="no" class="notranslate text-nowrap">&lt;nav&gt;</code>元素。
  不要将角色添加到<code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>本身，因为这会阻止辅助技术将其作为实际列表公布。
</p>
<p>
  在<code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code>中使用<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item-dropdown&gt;</code> 时，
  请确保为<code translate="no" class="notranslate text-nowrap">&lt;b-nav-dropdown&gt;</code>指定唯一的<code translate="no" class="notranslate text-nowrap">id</code>属性值，
  以便自动生成相应的<code translate="no" class="notranslate text-nowrap">aria-*</code>属性。
</p>
<h3 id="tabbed-interface-accessibility" class="bv-no-focus-ring"><span class="bd-content-title">选项卡式界面可访问性<a class="anchorjs-link" href="#tabbed-interface-accessibility" aria-labelledby="tabbed-interface-accessibility"></a></span></h3>
<p>
  请注意，导航栏，即使视觉样式为制表符，也不应赋予<code translate="no" class="notranslate text-nowrap">role="tablist"</code>, 
  <code translate="no" class="notranslate text-nowrap">role="tab"</code>或
  <code translate="no" class="notranslate text-nowrap">role="tabpanel"</code>属性。
  这些仅适用于不更改URL或<code translate="no" class="notranslate text-nowrap">$route</code>的
  <a href="../../../bootstrap-vue/docs/components/tabs" class="font-weight-bold">选项卡式接口</a>，
  如WAI ARIA创作实践中所述。有关与<a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel" target="_blank" rel="noopener">WAI ARIA兼容的动态选项卡式接口</a>，
  请参见<a href="../../../bootstrap-vue/docs/components/tabs" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code></a> 。
</p>
<p>选项卡式界面应避免使用下拉菜单，因为这会导致可用性和可访问性问题：</p>
<ul>
<li>从可用性的角度来看，当前显示的选项卡的触发器元素不立即可见（因为它在关闭的下拉菜单中）这一事实可能会导致混淆。</li>
<li>从可访问性的角度来看，目前还没有合理的方法将这种构造映射到标准的WAI ARIA模式，这意味着辅助技术的用户无法轻松地理解它。</li>
</ul>
<h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">另请参阅<a class="anchorjs-link" href="#see-also" aria-labelledby="see-also"></a></span></h2>
<ul>
<li><a href="../../../bootstrap-vue/docs/components/tabs" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code></a> 
  创建本地内容的选项卡式窗格，甚至通过下拉菜单。</li>
<li><a href="../../../bootstrap-vue/docs/components/navbar" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-navbar&gt;</code></a> 
  在简洁的标题中定位品牌、导航和其他元素的包装。</li>
<li><a href="../../../bootstrap-vue/docs/components/dropdown" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code></a>
  对于可以放置在内部的子组件<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item-dropdown&gt;</code></li>
<li><a href="../../../bootstrap-vue/docs/reference/router-links" class="font-weight-bold">Router Link Support reference</a> 
  有关<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item&gt;</code>上可用的特定于路由器链接的属性的信息
</li>
</ul>
<!-- Component reference added automatically from component package.json --> 

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/nav/#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-nav" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-nav&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav" class="anchorjs-link" aria-labelledby="comp-ref-b-nav" target="_self"></a></span></h3>
 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/nav/nav.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">

<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-nav-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav&gt;</code> 属性 </a></li>
   
</ul>

<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-nav-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-props" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__336">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="tag" class="" id="__BVID__336__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'ul'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>

<tr role="row" data-pk="fill" class="" id="__BVID__336__row_fill">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fill</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">按比例用导航项填充所有水平空间。所有水平空间都被占用，但不是每个导航项都有相同的宽度</td>
</tr>

<tr role="row" data-pk="justified" class="" id="__BVID__336__row_justified">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">justified</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">用导航项填充所有水平空间，但与“填充”不同，每个导航项的宽度都相同</td>
</tr>

<tr role="row" data-pk="align" class="" id="__BVID__336__row_align">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">align</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">对齐导航中的导航项：“开始”（或“左”）、“中心”、“结束”（或“右”）</td>
</tr>

<tr role="row" data-pk="tabs" class="" id="__BVID__336__row_tabs">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tabs</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">以选项卡的外观呈现导航项</td>
</tr>

<tr role="row" data-pk="pills" class="" id="__BVID__336__row_pills">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">pills</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">以pill按钮的外观呈现导航项</td>
</tr>

<tr role="row" data-pk="vertical" class="" id="__BVID__336__row_vertical">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">vertical</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">垂直渲染导航</td>
</tr>

<tr role="row" data-pk="small" class="" id="__BVID__336__row_small">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">small</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">使导航更小</td>
</tr>

<tr role="row" data-pk="card-header" class="" id="__BVID__336__row_card-header">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">card-header</code>  <span data-v-866a22e8="" class="badge badge-secondary">v2.0.0+</span>   </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当导航放置在卡头内时设置此属性</td>
</tr>

</tbody>

</table>
</div>
 </article>
   </section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-nav-item" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-nav-item&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-item" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-item" target="_self"></a></span></h3>
 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/nav/nav-item.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">

<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-nav-item-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-item&gt;</code> 属性 </a></li>
   
</ul>

<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-nav-item-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-item-props" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-item-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__360">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="href" class="" id="__BVID__360__row_href">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">href</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表示标准a链接的链接的目标URL</td>
</tr>

<tr role="row" data-pk="rel" class="" id="__BVID__360__row_rel">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">rel</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置呈现链接的“rel”属性</td>
</tr>

<tr role="row" data-pk="target" class="" id="__BVID__360__row_target">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">target</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'_self'</code></td>
<td aria-colindex="4" role="cell" class="">设置呈现链接的“target”属性</td>
</tr>

<tr role="row" data-pk="active" class="" id="__BVID__360__row_active">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当设置为“true”时，使用活动样式将组件置于活动状态</td>
</tr>

<tr role="row" data-pk="disabled" class="" id="__BVID__360__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>

<tr role="row" data-pk="to" class="" id="__BVID__360__row_to">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">to</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：表示链接的目标路由。单击时，to prop的值将在内部传递给router.push（），因此该值可以是字符串或位置描述符对象</td>
</tr>

<tr role="row" data-pk="append" class="" id="__BVID__360__row_append">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">append</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">路由器链接属性：设置附加属性总是将相对路径附加到当前路径</td>
</tr>

<tr role="row" data-pk="replace" class="" id="__BVID__360__row_replace">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">replace</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：设置替换属性将在单击时调用“router.replace（）”，而不是“router.push（）”，因此导航不会留下历史记录</td>
</tr>

<tr role="row" data-pk="event" class="" id="__BVID__360__row_event">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">event</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'click'</code></td>
<td aria-colindex="4" role="cell" class="">路由器链接属性：指定触发链接的事件。在大多数情况下，您应该将其保留为默认值</td>
</tr>

<tr role="row" data-pk="active-class" class="" id="__BVID__360__row_active-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active-class</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：配置当链接处于活动状态时应用的活动CSS类。通常您需要将其设置为类名“active”</td>
</tr>

<tr role="row" data-pk="exact" class="" id="__BVID__360__row_exact">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">exact</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：默认的活动类匹配行为是包含匹配。设置此道具将强制模式与路线完全匹配</td>
</tr>

<tr role="row" data-pk="exact-active-class" class="" id="__BVID__360__row_exact-active-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">exact-active-class</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：配置当链接处于活动状态时应用的活动CSS类，精确匹配。通常您需要将其设置为类名“active”</td>
</tr>

<tr role="row" data-pk="router-tag" class="" id="__BVID__360__row_router-tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">router-tag</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'a'</code></td>
<td aria-colindex="4" role="cell" class="">
  路由器链接属性：指定要呈现的标记，它仍将侦听用于导航的单击事件“路由器标记”转换为最终呈现路由器链接上的标记属性。通常应该使用默认值</td>
</tr>

<tr role="row" data-pk="no-prefetch" class="" id="__BVID__360__row_no-prefetch">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-prefetch</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  nuxt link prop：为了提高nuxt.js应用程序的响应性，当链接显示在视区内时，nuxt.js将自动预取代码分割的页面。设置“无预取”将禁用特定链接的此功能</td>
</tr>

<tr role="row" data-pk="link-attrs" class="" id="__BVID__360__row_link-attrs">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">link-attrs</code>     </td>
<td aria-colindex="2" role="cell" class="">Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要放置在嵌套链接元素上的其他属性</td>
</tr>

<tr role="row" data-pk="link-classes" class="" id="__BVID__360__row_link-classes">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">link-classes</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Object or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在嵌套链接元素上的CSS类</td>
</tr>

</tbody>

</table>
</div>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small">
  <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-item&gt;</code>支持生成
  <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;router-link&gt;</code>或 
  <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;nuxt-link&gt;</code>组件（如果使用nuxt.js）。
  有关路由器链接（或nuxt链接）特定属性的更多详细信息，请参阅<a data-v-866a22e8="" href="../../../bootstrap-vue/docs/reference/router-links" class="alert-link" target="_self">路由器支持 </a>参考部分。
</p>
</div>
</article>
   </section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-nav-text" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-nav-text&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-text" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-text" target="_self"></a></span></h3>
 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/nav/nav-text.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
     
</ul>
     </section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-nav-form" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-nav-form&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-form" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-form" target="_self"></a></span></h3>
 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件</a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/nav/nav-form.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">

<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-nav-form-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-form&gt;</code> 属性 </a></li>
 
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-nav-form-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-form&gt;</code> 事件 </a></li>

</ul>

<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-nav-form-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-form-props" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-form-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__398">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="id" class="" id="__BVID__398__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

<tr role="row" data-pk="novalidate" class="" id="__BVID__398__row_novalidate">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">novalidate</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，禁用窗体中控件的浏览器本机HTML5验证</td>
</tr>

<tr role="row" data-pk="validated" class="" id="__BVID__398__row_validated">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">validated</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，在窗体上添加引导类“was validated”，触发本机浏览器验证状态</td>
</tr>

<tr role="row" data-pk="form-class" class="" id="__BVID__398__row_form-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">form-class</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class=""></td>
</tr>

</tbody>

</table>
</div>
 </article>
 
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-nav-form-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-form-events" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-form-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__412">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="submit" class="" id="__BVID__412__row_submit">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">submit</code> </td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">Native submit event.</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">提交表单时发出</td>
</tr>

</tbody>

</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-nav-item-dropdown" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-nav-item-dropdown&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-item-dropdown" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-item-dropdown" target="_self"></a></span></h3>
 </div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/nav/nav-item-dropdown.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-nav-item-dropdown-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-item-dropdown&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-nav-item-dropdown-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-item-dropdown&gt;</code> 属性 </a></li>

<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-nav-item-dropdown-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-item-dropdown&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-nav-item-dropdown-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-item-dropdown&gt;</code> 事件 </a></li>

</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-nav-item-dropdown-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-item-dropdown-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-item-dropdown-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-item-dropdown&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-item-dd&gt;</code></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-dropdown&gt;</code></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-nav-dd&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-nav-item-dropdown-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-item-dropdown-props" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-item-dropdown-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__428">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="id" class="" id="__BVID__428__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

<tr role="row" data-pk="disabled" class="" id="__BVID__428__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>

<tr role="row" data-pk="dropup" class="" id="__BVID__428__row_dropup">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dropup</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将菜单放置在按钮顶部</td>
</tr>

<tr role="row" data-pk="dropright" class="" id="__BVID__428__row_dropright">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dropright</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将菜单放置在按钮右侧</td>
</tr>

<tr role="row" data-pk="dropleft" class="" id="__BVID__428__row_dropleft">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dropleft</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将菜单放置在按钮左侧</td>
</tr>

<tr role="row" data-pk="right" class="" id="__BVID__428__row_right">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">right</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将菜单的右边缘与按钮的右对齐</td>
</tr>

<tr role="row" data-pk="offset" class="" id="__BVID__428__row_offset">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset</code>     </td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">0</code></td>
<td aria-colindex="4" role="cell" class=""></td>
</tr>

<tr role="row" data-pk="no-flip" class="" id="__BVID__428__row_no-flip">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-flip</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">防止菜单自动翻转位置</td>
</tr>

<tr role="row" data-pk="popper-opts" class="" id="__BVID__428__row_popper-opts">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">popper-opts</code>     </td>
<td aria-colindex="2" role="cell" class="">Any</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要传递给Popper.js的附加配置</td>
</tr>

<tr role="row" data-pk="boundary" class="" id="__BVID__428__row_boundary">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">boundary</code>  <span data-v-866a22e8="" class="badge badge-secondary">v2.4.0+</span>   </td>
<td aria-colindex="2" role="cell" class="">String or HTMLElement</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'scrollParent'</code></td>
<td aria-colindex="4" role="cell" class="">
  菜单的边界约束：“scrollParent”、“window”、“viewport”或对HTMLElement的引用。当下拉菜单位于b-navbar中时不起作用</td>
</tr>

<tr role="row" data-pk="text" class="" id="__BVID__428__row_text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">text</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在切换按钮或拆分按钮中放置的文本为拆分模式</td>
</tr>

<tr role="row" data-pk="html" class="" id="__BVID__428__row_html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">html</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">HTML字符串放置在切换按钮中，或在拆分按钮中是拆分模式。慎用</td>
</tr>

<tr role="row" data-pk="menu-class" class="" id="__BVID__428__row_menu-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">menu-class</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要添加到菜单容器的CSS类</td>
</tr>

<tr role="row" data-pk="toggle-class" class="" id="__BVID__428__row_toggle-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">toggle-class</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要添加到切换按钮的CSS类</td>
</tr>

<tr role="row" data-pk="no-caret" class="" id="__BVID__428__row_no-caret">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-caret</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">隐藏切换按钮上的插入符号指示器</td>
</tr>

<tr role="row" data-pk="role" class="" id="__BVID__428__row_role">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">role</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'menu'</code></td>
<td aria-colindex="4" role="cell" class="">将ARIA属性“role”设置为特定值</td>
</tr>

<tr role="row" data-pk="lazy" class="" id="__BVID__428__row_lazy">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">lazy</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将只在菜单打开时将菜单内容装载到DOM中</td>
</tr>

</tbody>

</table>
</div>
 </article>

<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-nav-item-dropdown-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-item-dropdown-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-item-dropdown-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__455">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">范围</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="button-content" class="" id="__BVID__455__row_button-content">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">button-content</code> </td>
<td aria-colindex="2" role="cell" class="">可用于实现具有图标和更多样式的自定义文本。</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>

<tr role="row" data-pk="default" class="" id="__BVID__455__row_default">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">default</code> </td>
<td aria-colindex="2" role="cell" class="">下拉菜单内容的可选范围的默认槽。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>

</tbody>

</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-nav-item-dropdown-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/nav/#comp-ref-b-nav-item-dropdown-events" class="anchorjs-link" aria-labelledby="comp-ref-b-nav-item-dropdown-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__466">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="show" class="" id="__BVID__466__row_show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">show</code> </td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent对象。调用bvEvt.preventDefault（）取消显示。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在显示下拉列表之前发出。可取消。</td>
</tr>
<tr role="row" data-pk="shown" class="" id="__BVID__466__row_shown">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">shown</code> </td>
<td aria-colindex="2" role="cell" class=""></td>
<td aria-colindex="3" role="cell" class="">显示下拉列表时发出。</td>
</tr>
<tr role="row" data-pk="hide" class="" id="__BVID__466__row_hide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hide</code> </td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent对象。调用bvEvt.preventDefault（）取消隐藏。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在隐藏下拉列表之前发出。可取消。</td>
</tr>
<tr role="row" data-pk="hidden" class="" id="__BVID__466__row_hidden">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hidden</code> </td>
<td aria-colindex="2" role="cell" class=""></td>
<td aria-colindex="3" role="cell" class="">隐藏下拉列表时发出。</td>
</tr>
<tr role="row" data-pk="toggle" class="" id="__BVID__466__row_toggle">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">toggle</code> </td>
<td aria-colindex="2" role="cell" class=""></td>
<td aria-colindex="3" role="cell" class="">单击切换按钮时发出。</td>
</tr>

</tbody>

</table>
</div>
</article>

<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/nav/#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__481">

<thead role="rowgroup" class="thead-default">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-nav&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BNav</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-nav-item&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BNavItem</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-nav-text&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BNavText</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-nav-form&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BNavForm</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-nav-item-dropdown&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BNavItemDropdown</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>

</tbody>

</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BNav } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-nav'</span>, BNav)</pre></figure>
</article>

<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/nav/#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__495">

<thead role="rowgroup" class="thead-default">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">NavPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>

</tbody>

</table>
</div>
<p>此插件还自动包含以下插件：</p>
<ul>
<li><code translate="translate" class="notranslate">DropdownPlugin</code></li>
</ul>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { NavPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(NavPlugin)</pre></figure>










</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
